<script setup>
const props = defineProps({
  info: {
    type: Object
  }
})
function getPopupContainer(triggerNode) {
  return triggerNode.parentNode
}
</script>
<template>
  <a-popover placement="bottom" :getPopupContainer="getPopupContainer" trigger="click">
    <template #content>
      <a-descriptions
        class="resonsible-description"
        :column="1"
        :labelStyle="{ color: '#666' }"
        :contentStyle="{ color: '#333', fontWeight: 600 }"
      >
        <a-descriptions-item :label="$t('home.card.ENRAdmin')">{{
          info.enrollmentAdministrator
        }}</a-descriptions-item>
        <a-descriptions-item :label="$t('home.card.ENRAdminEmail')">{{
          info.enrollmentAdministratorEmail
        }}</a-descriptions-item>
        <a-descriptions-item :label="$t('home.card.CSEmail')"
          >{{ info.csEmail }}
        </a-descriptions-item>
        <a-descriptions-item :label="$t('home.card.CSTel')">{{ info.csPhone }}</a-descriptions-item>
      </a-descriptions>
    </template>
    <slot></slot>
  </a-popover>
</template>
<style lang="scss" scoped>
.resonsible-description {
  width: 500px;
}
</style>
